<template>
  <div class="view-gridtimepicker" @click.stop="noclick()">
 		<div class="gridtimepicker-warp" @mouseenter.stop="useHover?handleMouseenter():''" @mouseleave.stop="useHover?handleMouseleave():''" @click.stop="useHover?'':handleClick($event.target)" :class="useHover?'gridtimepicker-warp_hover':''">
 			<span class="gridtimepicker-left" :style="'width:'+width"><i class="title">{{promptText}}</i>{{starttime_show || endtime_show ? '': promptNullText}}{{starttime_show}}{{starttime_show && endtime_show?' 至 ':''}}{{endtime_show}}</span>
 			<i class="ivu-icon ivu-icon-arrow-down-b ivu-select-arrow"></i>
      <transition name="fade">
	 			<div class="dropdown" v-if="dropdownShow" @click.stop="noclick()">
	 				<div class="timebox">
	 					<Date-picker
			        :open=true
              :transfer=false
			        :value="starttime"
			        :type= 'dataType'
			        @on-change="handleChangestarttime"
			        @on-ok="handleOk">
			        <div class="timewarp">
			        	<span class="promptText">开始时间：</span>
			            <Icon type="ios-calendar-outline"></Icon>
			            <template v-if="starttime === ''">选择日期</template>
			            <template v-else>{{ starttime }}</template>
			            <span class="clearTime" @click="clearStartTime()"><Icon type="close-circled"></Icon></span>
			        </div>
				    </Date-picker>
	 				</div>
	 				<div class="timebox">
	 					<Date-picker
			        :open=true
              :transfer=false
			        :value="endtime"
			        :type= 'dataType'
			        @on-change="handleChangeendtime"
			        @on-ok="handleOk">
			        <div class="timewarp">
			        	<span class="promptText">结束时间：</span>
			            <Icon type="ios-calendar-outline"></Icon>
			            <template v-if="endtime === ''">选择日期</template>
			            <template v-else>{{ endtime }}</template>
			            <span class="clearTime" @click="clearEndTime()"><Icon type="close-circled"></Icon></span>
			        </div>
				    </Date-picker>
	 				</div>
	 				<div class="footerbox">
	 					<Button type="info" @click.stop="handleOk()">确定</Button>
						<Button @click.stop="handleCancle()">取消</Button>
	 				</div>
	 			</div>
			</transition>
 		</div>
  </div>
</template>
<script>
  import Helper from '@/common/helper'
  import ImgPreview from '@/components/img_preview'
  
  import Rest from '@/rest'
  import Api from '@/api'

  export default {
    name: 'grid_timepicker',
    data () {
      return {
        starttime: '',
        starttime_show: '',
        endtime: '',
        endtime_show: '',
        dropdownShow: false,
        timeout: null,
      }
    },
    props: {
      promptText: {
        type: String,
        default: ''
      },
      promptNullText: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: ''
      },
      useHover:{
      	type: Boolean,
      	default: false
      },
      open:{
      	type: Boolean,
      	default: false
			},
			defaultStartTime:{
      	type: String,
      	default: ''
			},
			defaultEndTime:{
      	type: String,
      	default: ''
			},
			defaultCurTime: {
				type: Boolean,
      	default: false
			},
			dataType: {
				type: String,
      	default: 'date'
			},
			defaultCurMonth: {// 会选择当月1到到当天
				type: Boolean,
      	default: false
			},
    },
    methods: {
    	noclick() {},
		init(){
		this.starttime=''	 
		this.starttime_show=''	 
		this.endtime_show=''	 
		this.endtime=''	 
		this.dropdownShow=false	 
		this.timeout=null	 
		},
    	clearStartTime(){
  			this.handleChangestarttime('')
    	},
    	clearEndTime(){
  			this.handleChangeendtime('')
    	},
    	// 鼠标移入事件（useHover存在时）
    	handleMouseenter() {
    		clearTimeout(this.timeout);
				this.timeout = setTimeout(()=>{
					this.dropdownShow = true;
      	}, 100);
  			this.handleChangestarttime(this.starttime_show)
  			this.handleChangeendtime(this.endtime_show)
    	},
    	// 鼠标移出事件（useHover存在时）
    	handleMouseleave() {
  			this.handleCancle();
    	},
    	// 点击事件（useHover不存在时）
    	handleClick (element) {
  			if(this.dropdownShow){
  				clearTimeout(this.timeout);
		      	this.timeout = setTimeout(()=>{
		        	this.dropdownShow = false;
		      	}, 100);
  				$(element).parents('.view-gridtimepicker').find('.gridtimepicker-warp').removeClass('gridtimepicker-warp_click');
  			}else{
      		clearTimeout(this.timeout);
					this.timeout = setTimeout(function() {
	  				this.dropdownShow = true;
	      	}, 100);
  				$(element).parents('.view-gridtimepicker').find('.gridtimepicker-warp').addClass('gridtimepicker-warp_click');
	  			this.handleChangestarttime(this.starttime_show)
  				this.handleChangeendtime(this.endtime_show)
  			}
      },
      // 修改开始时间
      handleChangestarttime(date) {
        this.$set(this, 'starttime', date);
      },
      // 修改结束时间
      handleChangeendtime(date) {
        this.$set(this, 'endtime', date);
      },
      handleCancle () {
	    	clearTimeout(this.timeout);
	    	this.timeout = setTimeout(()=>{
	      	this.dropdownShow = false;
	    	}, 100);
				$('.gridtimepicker-warp').removeClass('gridtimepicker-warp_click');
      },
      // 确定修改时间
      handleOk () {
      	var t1 = this.starttime;
      	var t2 = this.endtime;
      	if((t1 && t2) && (t1 > t2)){
      		this.$Message.warning("开始时间不能大于结束时间");
      		return;
      	}
  			this.starttime_show = t1;
  			this.endtime_show = t2;
  			this.handleCancle();
  			this.$emit("handleOk",t1,t2)
      },
      clearAll() {
      	this.handleChangestarttime('');
    		this.handleChangeendtime('');
    		this.starttime_show = '';
    		this.endtime_show = '';
      },
      initTime(starttime,endtime){
      	this.starttime = starttime;
      	this.starttime_show = starttime;
      	this.endtime = endtime;
      	this.endtime_show = endtime;
      },
      resetTime(){
				if(this.defaultCurTime){ //默认当前日期
					var curDate = Helper.formatDate(new Date());

					if(this.dataType == 'month'){
						curDate = curDate.split('-').splice(0,2);
						this.endtime_show = curDate.join('-');
						if(curDate[1] != '01'){
							curDate[1] = Number(curDate[1]) - 1;
							if(curDate[1]<10){curDate[1] = '0'+ curDate[1]}
							this.starttime_show = curDate.join('-');
						}else{
							this.starttime_show = [Number(curDate[0]) - 1,12].join('-');
						}
						this.$emit("handleOk",this.starttime_show,this.endtime_show)
					}else{
						this.starttime_show = curDate;
						this.endtime_show = curDate;
						this.$emit("handleOk",curDate,curDate)
					}
				}else if(this.defaultCurMonth){
					this.starttime_show = Helper.formatMonth(new Date()) + '-01';
					this.endtime_show = Helper.formatDate(new Date());
					this.$emit("handleOk",this.starttime_show,this.endtime_show)
				}else{
					this.starttime_show = this.defaultStartTime;
					this.endtime_show = this.defaultEndTime;
				}
      },
    },
    created() {
			//this.resetTime();
    },
    activated() {
			this.dropdownShow = this.open;
			this.clearAll();
			//this.resetTime();
    },
    components: {
    },
  }
</script>
<style lang="scss" >
@import "../assets/sass/install";
 	.view-gridtimepicker{
    color: #657180;
    font-size: 14px;
		.gridtimepicker-warp{
			padding: 0 8px;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
      display: block;
	    box-sizing: border-box;
	    outline: none;
	    user-select: none;
	    position: relative;
	    background-color: #fff;
	    @include radius(3px);
	    border: 1px solid #d7dde4;
	    transition: all 0.2s ease-in-out;
	    .gridtimepicker-left{
	    	display: inline-block;
	    	vertical-align: top;
	    	height: 100%;
				margin-right: 25px;
				.title{
					color: #666;
					margin-right: 2px;
				}
				color: #999;
	    }
	    .gridtimepicker-right{
	    	display: inline-block;
	    	vertical-align: middle;
	    	background-color: #666;
	    	height: 10px;
	    	width: 10px;
	    }
	    .dropdown{
	    	cursor: default;
	    	width: 515px;
	    	padding-top: 12px;
		    overflow: auto;
		    background-color: #fff;
		    box-sizing: border-box;
		    border-radius: 3px;
		    margin-top: -1px;
		    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
		    position: absolute;
		    left: 0;
		    z-index: 900;
		    .timebox{
		    	position: relative;
		    	display: inline-block;
					width: 240px;
					height: 293px;	
		    	background-color: #f5f5f5;
		    	padding: 8px;
		    	margin-left: 10px;
	    		@include radius(3px);
		    }
		    .timewarp{
		    	padding-bottom: 10px;
		    	color: #02b0f0;
		    	&:hover{
		    		.clearTime{
			    		display: inline-block;
			    	}
		    	}
		    }
		    .promptText{
		    	color: #657180;
		    }
		    .footerbox{
		    	margin-top: 8px;
		    	width: 100%;
		    	text-align: right;
		    	padding: 12px;
		    	border-top: 1px solid #ddd;
		    }
	    }
		}
		.gridtimepicker-warp_hover{
			&:hover{
	    	border-color: #35c0f3;
		    outline: 0;
		    box-shadow: 0 0 0 2px rgba(2, 176, 240, 0.2);
		    .ivu-select-arrow{
					transform: rotate(180deg);
		    }
	    };
		}
		.gridtimepicker-warp_click{
			border-color: #35c0f3;
	    outline: 0;
	    box-shadow: 0 0 0 2px rgba(2, 176, 240, 0.2);
	    .ivu-select-arrow{
				transform: rotate(180deg);
	    }
		}
		.clearTime{
			display: none;
			float: right;
			font-size: 16px;
			height: 25px;
			margin-right: 8px;
			margin-top: -1px;
			color: #999;
			cursor: pointer;
		}
 	}
</style>
